<template>
  <div id="app">
    <van-overlay ref="shomen" :show="bgAvtive" @click="handShowMe2n(false)" />
    <nav-top-login @handNavTo="handNavTo" @handShowMen="handShowMen" :bgAvtive="bgAvtive"></nav-top-login>
    <build-header></build-header>
    <build-nav></build-nav>
    <transition name="el-fade-in">
      <router-view />
    </transition>

    <build-footer></build-footer>
  </div>
</template>

<script>
import buildNav from '@/components/build-nav'
import BuildHeader from '@/components/build-header'
import buildFooter from '@/components/build-footer'
import navTopLogin from '@/components/nav-top-login'
export default {
  components: { buildNav, BuildHeader, buildFooter, navTopLogin },
  methods: {
    handShowMe2n() {
      this.bgAvtive = false
    },
    handNavTo() {
      this.bgAvtive = false
    },
    handShowMen(active) {
      this.bgAvtive = !this.bgAvtive
    },
  },
  data() {
    return {
      bgAvtive: false,
    }
  },
}
</script>
<style lang="less">
.bg-touming {
  background-color: rgba(0, 0, 0, 0.7);
}
#app {
  .flex-al;
  .al-c;
}
</style>
